import Vue from 'vue'
import ZIcon from '@/components/storybook/z-icon'
import bus from '@/components/storybook/utilties/bus'

export const ActionTemplate = Vue.component('ActionTemplate', {
  components: {
    ZIcon
  },
  template: `
      <div class="action inline-flex justify-center items-center">
        <ZIcon :disabled="!$hasPermission('sys:user:update')"  @click.native.stop="onEdit" icon="cuifont icon_edit" content="Edit" size="14" hover tooltip style="margin-right:6px;font-size:12px"/>
        <ZIcon  :disabled="!$hasPermission('sys:user:reset')" icon="cuifont icon_key" size="14"  content="Reset Password" hover style="margin-right:6px" tooltip @click.native.stop="onReset"/>
        <ZIcon :disabled="!$hasPermission('sys:user:delete')" icon="el-icon-delete" size="14"  tooltip content="Delete" hover @click.native.stop="onDelete"/>
      </div>
    `,
  methods: {
    onEdit () {
      bus.$emit('event:edit', this.$data.data)
    },
    onDelete () {
      bus.$emit('event:delete', this.$data.data)
    },
    onReset () {
      bus.$emit('event:reset', this.$data.data)
    }
  }
})

export const MessageSwitchTemplate = Vue.component('MessageSwitchTemplate', {
  template: `
      <el-switch :disabled="!$hasPermission('sys:user:update')"
      v-model='$data.data.teamsMessageSwitch'
      @change="onChange">
      </el-switch>
    `,
  methods: {
    onChange () {
      bus.$emit('event:change-message', this.$data.data)
    }
  }
})

export const GuestUserTemplate = Vue.component('GuestUserTemplate', {
  template: `
      <div class="guest-user relative inline-flex justify-center items-center" :style="{
        backgroundColor: isGuestUser === 'True' ? '#FFEBE5': '#E3FCEF',
        width: '100px',
        height: '30px'
      }">
        <span style="color:#e60000" v-if="isGuestUser === 'True'">{{isGuestUser}}</span>
        <span style="color:#00cc00" v-else>{{isGuestUser}}</span>
      </div>
    `,
  computed: {
    isGuestUser () {
      return this.$data.data.isGuestUser === true ? 'True' : 'False'
    }
  }
})

export const StatusTemplate = Vue.component('StatusTemplate', {
  template: `
      <div class="guest-user relative inline-flex justify-center items-center" :style="{
        backgroundColor: status === 'Enabled' ? '#E3FCEF': '#FFEBE5',
        width: '100px',
        height: '30px'
      }">
        <span style="color:#00cc00" v-if="status === 'Enabled'">{{status}}</span>
        <span style="color:#e60000" v-else>{{status}}</span>
      </div>
    `,
  computed: {
    status () {
      return this.$data.data.status === 1 ? 'Enabled' : 'Disabled'
    }
  }
})

const HomeChannelTemplate = Vue.component('HomeChannelTemplate', {
  template: `
      <div v-if="$data.data.homeChannel">
        {{$data.data.homeChannel}}
      </div>
      <div v-else>
        <el-link :underline="false" style="font-weight: bold;" type="danger">
        Add home channel
        </el-link>
      </div>
    `
})

const ManagerFormatTemplate = Vue.component('ManagerFormatTemplate', {
  template: `
      <div v-if="$data.data.managerName">
        {{$data.data.managerName}}
      </div>
      <el-link v-else size="mini" :underline="false"  style="font-weight: bold;" type="danger"  href="https://wiki.mspbots.ai/x/ZYcF"  target="_blank">Set Manager</el-link>

    `
})

const RoleTemplate = Vue.component('RoleTemplate', {
  template: `
      <div  v-if="isIncludeAdmin" style="color:#00cc00;font-weight: bold;">
        {{$data.data.roles}}
      </div>
      <div v-else >
        {{$data.data.roles}}
      </div>
    `,
  computed: {
    isIncludeAdmin () {
      return (this.$data.data.roles || '').toLowerCase().indexOf('admin') !== -1
    }
  }
})

export const RenderGuestUser = () => {
  return {
    template: GuestUserTemplate
  }
}
export const HomeChannel = () => {
  return {
    template: HomeChannelTemplate
  }
}
export const Status = () => {
  return {
    template: StatusTemplate
  }
}
export const ManagerFormat = () => {
  return {
    template: ManagerFormatTemplate
  }
}
export const Role = () => {
  return {
    template: RoleTemplate
  }
}

export const Action = () => {
  return {
    template: ActionTemplate
  }
}
export const MessageSwitch = () => {
  return {
    template: MessageSwitchTemplate
  }
}
